<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, cache } from '@utils';
import { ElMessage } from 'element-plus';
import store from '@store';

const emit = defineEmits(['refresh']);

const props = defineProps({
    companys: Array,
    statuss: Array,
    companyss: Array,
});
const user = store.getters.user;
const isPlatform = !user.enterpriseType;
const visible = ref(false);
const formRef = ref();

const depts = ref();
const stations = ref();
const groups = ref();
const roles = ref();

const state = reactive({
    param: {},
});

const rules = {
    userName: [{ required: true, message: '请输入', trigger: 'blur' }],
    nickName: [{ required: true, message: '请输入', trigger: 'blur' }],
    status: [{ required: true, message: '请选择', trigger: 'change' }],
    companyCode: [{ required: true, message: '请选择', trigger: 'change' }],
    orgId: [{ required: true, message: '请选择', trigger: 'change' }],
    phone: [{ required: true, message: '请输入', trigger: 'blur' }],
    email: [{ required: true, message: '请输入', trigger: 'blur' }],
    roleIdList: [{ required: true, message: '请选择', trigger: 'change' }],
};

const open = item => {
    state.param = { ...item };
    if (!state.param.companyCode) {
        // state.param.companyCode = user.companyCode
    }
    // getOptions()
    visible.value = true;
};

const close = () => {
    visible.value = false;
    state.param = {};
    depts.value = null;
    stations.value = null;
    groups.value = null;
    // roles.value = null
};

// const getOptions = () => {
// getDept()
// getStation()
// getGroup()
// getRole()
// }

// const getDept = async () => {
//     const res = await service.auth.deptTree({ companyCode: state.param.companyCode })
//     depts.value = res
// }

// const getStation = async () => {
//     if (!state.param.departCode) {
//         stations.value = []
//         return
//     }
//     const res = await service.auth.stationAll({ departCode: state.param.departCode })
//     stations.value = res
// }

// const getGroup = async () => {
//     const res = await service.auth.osysorgTree({ companyCode: state.param.companyCode })
//     groups.value = res
// }

const getRole = async () => {
    const res = await service.auth.rolePage();
    roles.value = res.list;
};

const changeCompany = () => {
    // state.param.departCode = ''
    // state.param.stationCode = ''
    // state.param.groupCode = ''
    // getOptions()
};

const changeDept = () => {
    state.param.stationCode = '';
    // getStation()
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};

const realSubmit = async () => {
    state.param.orgId = Number(state.param.orgId);
    const res = await service.auth.userEdit(toRaw(state.param));
    if (res) {
        ElMessage.success('修改成功');
        close();
        emit('refresh', !!state.param.id);
    }
};

const saveSure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            saveSubmit();
        }
    });
};

const saveSubmit = async () => {
    state.param.orgId = Number(state.param.orgId);
    const res = await service.auth.userSave(toRaw(state.param));
    if (res) {
        ElMessage.success('新增成功');
        close();
        emit('refresh', !!state.param.id);
    }
};
getRole();

//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" :title="!!state.param.id ? '修改' : '新增'" center :close-on-click-modal="false" @close="close" destroy-on-close :width="800" top="12vh">
        <section>
            <el-form :model="state.param" :rules="rules" ref="formRef" label-width="100px" label-suffix=":" onsubmit="return false;">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账号" prop="userName">
                            <el-input :disabled="!!state.param.id ? true : false" v-model="state.param.userName" placeholder="请输入账号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="昵称" prop="nickName">
                            <el-input v-model="state.param.nickName" placeholder="请输入昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="state.param.status">
                                <el-radio v-for="{ label, value } in statuss" :key="value" :label="value * 1">{{ label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="state.param.phone" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="state.param.email" placeholder="请输入邮箱" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="isPlatform">
                        <el-form-item label="所属商户" prop="companyCode">
                            <el-select v-model="state.param.companyCode" @change="changeCompany" style="width: 100%" placeholder="请选择商户" clearable>
                                <el-option v-for="{ label, companyCode } in companyss" :key="companyCode" :label="label" :value="companyCode" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属机构·" prop="orgId">
                            <el-select v-model="state.param.orgId" @change="changeCompany" style="width: 100%" placeholder="请选择机构" clearable>
                                <el-option v-for="{ id, name } in companys" :key="id" :label="name" :value="id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" prop="roleIdList">
                            <el-select v-model="state.param.roleIdList" multiple style="width: 100%" placeholder="请选择角色" clearable>
                                <el-option v-for="{ name, id } in roles" :key="id" :label="name" :value="id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <!-- <el-form-item v-if="suggestionsBool" label="渠道" prop="suggestions">
                            <el-select v-model="state.param.channelCode" multiple style="width: 100%" placeholder="请选择渠道" clearable>
                                <el-option v-for="{ channelName, channelCode } in suggestionsList" :key="channelCode" :label="channelName" :value="channelCode" />
                            </el-select>
                        </el-form-item> -->
                    </el-col>
                    <el-col :span="12"></el-col>
                </el-row>
                <!-- <el-form-item v-if="state.param.companyCode" label="部门" prop="departCode">
                    <el-tree-select v-model="state.param.departCode" @change="changeDept" :data="depts" :render-after-expand="false"
                        check-strictly clearable :props="{value: 'code', label: 'label'}" style="width: 100%" />
                </el-form-item>
                <el-form-item v-if="state.param.departCode" label="所属岗位" prop="stationCode">
                    <el-select v-model="state.param.stationCode" style="width:100%" placeholder="请选择所属岗位" clearable>
                        <el-option v-for="{label, code} in stations" :key="code" :label="label" :value="code" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="state.param.companyCode" label="用户组" prop="groupCode">
                    <el-select v-model="state.param.groupCode" multiple style="width:100%" placeholder="请选择用户组" clearable>
                        <el-option v-for="{label, code} in groups" :key="code" :label="label" :value="code" />
                    </el-select>
                </el-form-item>-->
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button v-if="!!state.param.id ? true : false" type="primary" @click="sure">确定</el-button>
                <el-button v-if="!!state.param.id ? false : true" type="primary" @click="saveSure">新增</el-button>
            </span>
        </template>
    </el-dialog>
</template>
